<template>
 <div id="DT">
      <div class="animation">
        <div class=" swiper-container">
        <ul class="swiper-wrapper">
            <li v-for="(item,index) in  imgs"  class="swiper-slide" 
            :key="index">
                
                <img :src="item.cover" class="swiperImg" alt="" >
            </li>
             
        </ul>
        </div>
         <div class="title-dt">
             <div class="left" @click="left()"><span  class="iconfont">&#xe65f;</span></div>
            <div class="titleHomeMV" ref="scrollTab">
           
            <ul  ref="ref1" :style="{position: 'relative', left: leftV + 'px'}">
                <li><span class="iconfont">&#xe62e;</span><span>排榜 </span></li>
                <li><span class="iconfont" >&#xe67b;</span><span>情感</span> </li>
                <li><span class="iconfont">&#xe642;</span><span>音乐推荐</span> </li>
                <li><span class="iconfont">&#xe62e;</span><span>有声书</span></li>
                <li><span class="iconfont">&#xe62e;</span><span>创作翻唱</span></li>
                <li><span class="iconfont">&#xe62e;</span><span>电音</span></li>
                <li><span class="iconfont">&#xe62e;</span><span>知识</span></li>
                <li><span class="iconfont">&#xe62e;</span><span>音乐推荐</span></li>
                <li><span class="iconfont">&#xe62e;</span><span>有声书</span></li>
                <li><span class="iconfont">&#xe62e;</span><span>创作翻唱</span></li>
                <li><span class="iconfont">&#xe62e;</span><span>电音</span></li>
                <li><span class="iconfont">&#xe62e;</span><span>知识</span></li>

            </ul> 
          
        </div>  
          <div class="right" @click="right()"><span  class="iconfont">&#xe660;</span></div>   
    
         </div>
         <!-- 听听 -->
    <div>
        <!-- <Titles>
            <h1>听听</h1>
        </Titles>
        <TT :data="imgs"></TT> -->
    </div>
    <div>
        <Titles>
            <h1>付费精品</h1>
        </Titles>
         <PayJp :data="PayJp"></PayJp>
    </div>
    <div>
        <Titles>
            <h1>电台个性推荐</h1>
        </Titles>
         <RecommendDt :data="RecommendDt"></RecommendDt>
    </div>
    <div>
        <Titles>
            <h1>有声书</h1>
        </Titles>
         <RecommendDt :data="RecommendYss"></RecommendDt>
    </div>
    <div>
        <Titles>
            <h1>创作翻唱</h1>
        </Titles>
         <RecommendDt :data="RecommendYss"></RecommendDt>
    </div>
    <div>
        <Titles>
            <h1>音乐推荐</h1>
        </Titles>
         <RecommendDt :data="tkx"></RecommendDt>
    </div>
    <div>
        <Titles>
            <h1>情感</h1>
        </Titles>
         <RecommendDt :data="tkx"></RecommendDt>
    </div>
    <div>
        <Titles>
            <h1>脱口秀</h1>
        </Titles>
         <RecommendDt :data="tkx"></RecommendDt>
    </div>
</div>
</div>   
</template>
<script>
import TT from '@/components/slotDtTT.vue'
import Titles from '@/components/title.vue'
import PayJp from '@/components/slotPayJp.vue'
import RecommendDt from '@/components/slotZbdtRecommed.vue'
import api from '../utils/api'
import Services from '../utils/Service'
export default {
    data() {
        return {
            w:'',
            imgs:[
            //     {
            //     id:'图片1',
            //     index:0,
            //     type:'TT',
            //     title:'现实与虚拟的结合',
            //     "cover":require('../../public/homeImg/109951167672133306.jpg')
            // }
            ],
            PayJp:[
            //     {
            //     type:'PayJp',
            //     title:'广播剧',
            //     introduction:'小麻雀与大灰狼的夏日恋爱无物语',
            //     studio:'青梅鱼',
            //     current:' 第十二集',
            //     money:'￥12.9',
            //     upData:'2021年3月23日更新',
            //     img:require('../../public/homeImg/recommGd1.jpg')
            // }
            
            ],
            RecommendDt:[
                
            //     {
            //     type:'RecommendYss',
            //     id:'图片1',
            //     title:'不惧岁月|想在爱意随风起的时代和你慢慢来',
            //     index:'',
            //     "cover":require('../../public/homeImg/recommGd.jpg'),
            //     titleH1:'独家放送',
            // }
            
            ],
            RecommendYss:[
                {
                type:'RecommendYss',
                id:'图片1',
                title:'不惧岁月|想在爱意随风起的时代和你慢慢来',
                index:'',
                "cover":require('../../public/homeImg/recommGd.jpg'),
                titleH1:'独家放送',
            },
            
            {   
                 type:'RecommendYss',
                id:'图片2',
                index:1,
                 title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            },
            
            {
                 type:'RecommendYss',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
             },
            {
                 type:'RecommendYss',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            }
            ],
            tkx:[
                  {
                    //1类无人气值 图片内外一个标题
                 type:'1',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                 title2:'不一样的味道，确是一样的感觉',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            },
            {
                 type:'1',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                title2:'相关游戏：明日方舟',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            },
           
             {
                    //1类无人气值 图片内外一个标题
                 type:'1',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                 title2:'不一样的味道，确是一样的感觉',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            },
            {
                 type:'1',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                title2:'相关游戏：明日方舟',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            },
             {
                    //1类无人气值 图片内外一个标题
                 type:'1',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                 title2:'不一样的味道，确是一样的感觉',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            },
            {
                 type:'1',
                id:'图片2',
                index:1,
                title:'热门歌正在持续更新',
                title2:'相关游戏：明日方舟',
                "cover":require('../../public/homeImg/recommGd1.jpg')
            }
            
            ],

            scrollTabChildStyle:false,
            leftV:0
        }
    },
    components:{
            TT,Titles,PayJp,RecommendDt
        },
    mounted() {
        this.bannerDt()
        this.topListPay()
        this.getRecommendDt()
        this.w = this.$refs.scrollTab.offsetWidth
		var mySwiper = new Swiper('.swiper-container', {
	        autoplay: 5000,//可选选项，自动滑动
            slidesPerView : 3,
            spaceBetween : 20,
            watchSlidesProgress : true,
            watchSlidesVisibility : true,
            observer:true,
            // observerParents:true
        })
	},
    methods: {
        left(){
            this.scrollTabChildStyle = false
            if (this.scrollTabChildStyle == false) {
                this.leftV = 0;
                // console.log(this.scrollTabChildStyle)
                // console.log(this.leftV)
            }
            //距离父级元素距离
        // //   let currentL =  this.$refs.scrollTab.offsetLeft  
        //     if(this.$refs.scrollTab.offsetLeft!=this.scrollTabL&&this.$refs.scrollTab.offsetLeft>this.scrollTabL){

        //     }else{
        //         return
        //     }
        },
        right(){
            this.scrollTabChildStyle = true
            var W= this.$refs.scrollTab.offsetWidth
                if (this.scrollTabChildStyle == true&&this.leftV==0) {
                 this.leftV = this.w*-1
                //   console.log(this.scrollTabChildStyle)
                //   console.log(this.leftV)
            }
        },
          async bannerDt(){
        
      let res = await Services(api.bannerDt);
      if(res.status == 200&&res.data.code==200){
         let getData= [...res.data.data]
       this.imgs = getData.map(function(item,index){
      return {
        
        typeTitle:getData[index].typeTitle,
        cover:getData[index].pic,
        
      }
    })
    console.log(getData)
      }else{
        console.log(res+'分类标签')
      }
    },
       async topListPay(){
        let data = {
        limit:6
      }
      let res = await Services(api.topListPay,data);
      if(res.status == 200&&res.data.code==200){
         let getData= [...res.data.data.list]
       this.PayJp = getData.map(function(item,index){
      return {
         type:'PayJp',
        cover:getData[index].picUrl,
        title:getData[index].creatorName,
        current:getData[index].name,
        id:getData[index].id
      }
    })
    console.log( this.PayJp)
      }else{
        console.log(res+'分类标签')
      }
    },
    async getRecommendDt(){
      let res = await Services(api.recommendDt);
      if(res.status == 200&&res.data.code==200){
         let getData= [...res.data.djRadios]
       this.RecommendDt = getData.map(function(item,index){
      return {
        type:'RecommendYss',
        cover:getData[index].picUrl,
        title:getData[index].copywriter,
        name:getData[index].name,
        id:getData[index].id
      }
    })
    console.log( this.RecommendDt)
      }else{
        console.log(res+'分类标签')
      }
    },
    }
}
</script>
<style lang="less" scoped>
.animation{
    max-width: 95%;
    // border: solid forestgreen 1px;
    // width: 7.1875rem /* 1380/192 */;
    // width: 1440px;
    margin: 0 auto;
    // position: relative;
    div,span,ul,li,img{
    font-size: 0;
}
.swiper-wrapper{
  z-index: 0 !important;
}
.swiper-container{
  z-index: 0 !important;
}
.swiperImg{
    width: 100%;
}
    .liImg0{
            // position: relative;
            // left: 400px;
        }
        ul{
            width: 80%;
            box-sizing: border-box;
        }
    ul>.swiper-li{
        width: 50%;
        

        img{
            width: 100%;
        }
        
    }
    .title-dt{
    margin-top:25px;
           position: relative;
        .left,.right{
            position: absolute;
            width: 30px;
    height: 68px;
    line-height:68px;
    text-align: center;
    transition: .3s;
    border-radius: 2px;
    
            span{
              width: 10%;
            text-align: center;
        font-size: 15px ;
    display: inline-block;
    transform: rotate(
180deg);
    transition: .3s;
        color: silver;
    font-size: 24px;
}
        }
        .right{
            right: 40px;
            
      top: 20%;
        }
        .left{
            left: 40px;
               top: 20%;
        }
    .titleHomeMV{
        // display: flex;
        // width: 100%;
        //     min-height: 98px;
        // margin-top: 25px;
        // box-sizing: border-box;
        // align-items: center;
        // justify-content:center;
        // overflow: hidden;
        position: relative;
        // left: 50px;
        width: 80%;
    height: 84.8%;
    display: flex;
    overflow: hidden;
    margin: 0 auto;
        
        ul {
            // width: 80%;
            // display: flex;
                display: flex;
    transition: .6s ease-in-out;
    transform: translateX(0px);
            li{
                // text-align: center;
                // width:  calc(calc(100% / 8));

                    width: 12.5%;
                    margin-right: 10px;
    overflow: hidden;
        background: #fff;
        flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    border-radius: 2px;
    transition: height .3s;

                span:nth-child(2){
                    font-size: 16px;
                    
                }
                 span:first-child{
                font-size: 30px;
                 display: block;
                font-size: 30px;
    display: block;
    width: 70px;
    height: 70px;
    background: #FCEBEB;
    color: #EF5E5E;
    font-weight: 600;
    border-radius: 50%;
    text-align: center;
        line-height: 70px;
            }
            }
        }
    }
    }
}
</style>